<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>
    demo 1
  </title>
  <script src="jquery-1.10.2/jquery.min.js">
  </script>
  <script type="text/javascript" src="js/canvas.js">
  </script>
</head>

<body onload="init()">
<div id="body">
  <div>
    <button id="reset" class="reset">
                    <span>
                        重置
                    </span>
    </button>
    <button id="create" class="create">
                    <span>
                        新建
                    </span>
    </button>
    <button id="state" class="state">
                    <span id="txt">
                        Start
                    </span>
    </button>
    <button id="barrier" class="barrier">
                    <span>
                        添加障碍物
                    </span>
    </button>
    <button id="save" class="save">
                    <span>
                        保存
                    </span>
    </button>
  </div>
  <div id="container">
    <canvas id="canvas0" width="1000" height="600" style="border: 1px solid black;">
    </canvas>
  </div>
</div>
</body>
<script>
  var CanvasAry;
  var edit = false;
  function init() {
    CanvasAry = new Array();
    var canvas = document.getElementById('canvas0');
    var s = new CanvasState(canvas);
    // s.addShape(new Shape(0, 0, 60, 30, 'rgba(96, 96, 96, .5)', true));
    // s.addShape(new Shape(30, 30, 60, 30, 'rgba(96, 96, 96, .5)', true));
    CanvasAry[0] = s;
    start();
    end();
  }
  $(document).on('click', ".reset",
    function(event) {
      edit = false;
      $("canvas").remove();
      $("#txt").html("Start");
      var container = document.getElementById('container');
      var canvas = document.createElement('canvas');
      canvas.id = 'canvas0';
      canvas.width = 1000;
      canvas.height = 600;
      canvas.style.border = '1px solid black';
      // canvas.style.backgroundColor = 'rgb(94, 255, 0)';
      container.appendChild(canvas);
      init();
    });
  $(document).on('click', ".state",
    function(event) {
      var txt = $("#txt")[0].innerHTML;
      if (txt == "Start") {
        start();
      } else {
        end();
      }
    });

  $(document).on('click', ".barrier",
    function(event) {
      end()
      var flag = true;
        var box = document.getElementsByClassName("fixed")
        document.onmousedown=function(ev){
          //var oEvent=ev||event;
          var oDiv=document.createElement('div');// 计算可移动位置的大小， 保证元素不会超过可移动范围
          // var wid = oEvent.clientX-box.scrollWidth
          // var hei = oEvent.clientY-box.scrollHeight
          if(ev.clientY>50 && flag){
            oDiv.style.left=ev.clientX+'px';  // 指定创建的DIV在文档中距离左侧的位置
            oDiv.style.top=ev.clientY+'px';  // 指定创建的DIV在文档中距离顶部的位置
            oDiv.style.border='1px solid #000000'; // 设置边框
            oDiv.style.background = "#000000"
            oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
            oDiv.style.width='100px'; // 指定宽度
            oDiv.style.height='100px'; // 指定高度
            document.body.appendChild(oDiv);
            flag = false;
          }
        }
    });
  $(document).on('click', ".create",
    function(event) {
      var container = document.getElementById('container');
      var l = CanvasAry.length;
      var newId = 'canvas' + (l + 1);
      var canvas = document.createElement('canvas');
      canvas.id = newId;
      canvas.width = 1000;
      canvas.height = 600;
      canvas.style.border = '1px solid black';
      // canvas.style.backgroundColor = 'rgb(94, 255, 0)';
      container.appendChild(canvas);
      var newS = new CanvasState(canvas);
      CanvasAry[l] = newS;
      var txt = $("#txt")[0].innerHTML;
      if (txt == "End") {
        newS.start();
      }
    });

  $(document).on('click', ".save",
    function(event) {
      var canvas = document.getElementById("canvas0");
      // var context = canvas.getContext("2d");
      // window.location = canvas.toDataURL("image/png")
      downLoad(saveAsPNG(canvas));
    });

  function saveAsPNG(canvas) {
    return canvas.toDataURL("image/png");
  }

  function downLoad(url) {
    var oA = document.createElement("a");
    oA.download = 'picture';// 设置下载的文件名，默认是'下载'
    oA.href = url;
    document.body.appendChild(oA);
    oA.click();
    oA.remove(); // 下载之后把创建的元素删除
  }
  function start() {
    var l = CanvasAry.length;
    edit = true;
    for (var i = 0; i < l; i++) {
      CanvasAry[i].start();
      redraw(CanvasAry[i]);
    }
    $("#txt").html("End");
  }
  function end() {
    var l = CanvasAry.length;
    edit = false;
    for (var i = 0; i < l; i++) {
      redraw(CanvasAry[i]);
      CanvasAry[i].end();
    }
    $("#txt").html("Start");
  }
  function redraw(myState) {
    var ctx = myState.ctx;
    var shapes = myState.shapes;
    myState.clear();
    var l = shapes.length;
    for (var i = 0; i < l; i++) {
      var shape = shapes[i];
      shapes[i].draw(ctx);
    }
  }
</script>

</html>
